import store from '../../../store';

export default function DropEventHook() {
  const drop = event => {
    var _a, _b;
    const { offsetX, offsetY, target, path } = event;
    // 默认配置项
    // const defaultSize = { width: 400, height: 260 };
    console.log(store.state);
    const defaultSize = Object.assign(
      {},
      store.state.imageDragMoudules.editorConfig.defaultComponentSize
    );
    const copied =
      (_a = store.state.imageDragMoudules.draggedComponent) !== null &&
      _a !== void 0
        ? _a
        : '';
    const canvasSize = store.state.imageDragMoudules.canvas.size;
    const draggedConfig = store.state.imageDragMoudules.draggedConfig || {};
    let left, top;
    // 拖放结束时鼠标在画布上
    if (target.tagName === 'DIV' && target.className === 'editor-canvas-area') {
      left =
        offsetX -
        ((draggedConfig === null || draggedConfig === void 0
          ? void 0
          : draggedConfig.offsetX) || 0);
      top =
        offsetY -
        ((draggedConfig === null || draggedConfig === void 0
          ? void 0
          : draggedConfig.offsetY) || 0);
    } else {
      const targetDiv = path.find(el => el.className.indexOf('cp cp') !== -1);
      // 拖拽放置的目标位置在组件上
      console.log(targetDiv.style);

      const [x, y] =
        (_b = targetDiv.style.transform.match(
          /translate[X|Y]\((\d+)(?:px)?\)/g
        )) === null || _b === void 0
          ? void 0
          : _b.map(d => {
              var _a;
              return (_a =
                d === null || d === void 0
                  ? void 0
                  : d.match(/translate[X|Y]\((\d+)(?:px)?\)/)) === null ||
                _a === void 0
                ? void 0
                : _a[1];
            });
      left =
        Number(x) +
        offsetX -
        ((draggedConfig === null || draggedConfig === void 0
          ? void 0
          : draggedConfig.offsetX) || 0);
      top =
        Number(y) +
        offsetY -
        ((draggedConfig === null || draggedConfig === void 0
          ? void 0
          : draggedConfig.offsetY) || 0);
    }
    const gridColWidth =
      canvasSize.width / store.state.imageDragMoudules.canvas.grid.col;
    const gridColHeight =
      canvasSize.height / store.state.imageDragMoudules.canvas.grid.row;
    const surplusX = left % gridColWidth;
    const surplusY = top % gridColHeight;
    if (surplusX > gridColWidth / 2) {
      left = (Math.floor(left / gridColWidth) + 1) * gridColWidth;
    } else {
      left = Math.floor(left / gridColWidth) * gridColWidth;
    }
    if (surplusY > gridColHeight / 2) {
      top = (Math.floor(top / gridColHeight) + 1) * gridColHeight;
    } else {
      top = Math.floor(top / gridColHeight) * gridColHeight;
    }
    left = left + 8;
    top = top + 8;
    const surplusW = defaultSize.width % gridColWidth;
    const surplusH = defaultSize.height % gridColHeight;
    if (surplusW > gridColWidth / 2) {
      defaultSize.width =
        (Math.floor(defaultSize.width / gridColWidth) + 1) * gridColWidth;
    } else {
      defaultSize.width =
        Math.floor(defaultSize.width / gridColWidth) * gridColWidth;
    }
    if (surplusH > gridColHeight / 2) {
      defaultSize.height =
        (Math.floor(defaultSize.height / gridColHeight) + 1) * gridColHeight;
    } else {
      defaultSize.height =
        Math.floor(defaultSize.height / gridColHeight) * gridColHeight;
    }
    defaultSize.height = defaultSize.height - 16;
    defaultSize.width = defaultSize.width - 16;
    // 边界判定
    if (left < 0) left = 0;
    if (top < 0) top = 0;
    if (left + defaultSize.width > canvasSize.width)
      left = canvasSize.width - defaultSize.width;
    if (top + defaultSize.height > canvasSize.height)
      top = canvasSize.height - defaultSize.height;
    const newComponent = {
      component: copied,
      size: Object.assign({}, defaultSize),
      position: { left, top },
    };
    store.commit('createComponent', newComponent);
  };
  return {
    drop,
  };
}

export function dropEvent(event) {
  var _a, _b;
  const { offsetX, offsetY, target, path } = event;
  // 默认配置项
  // const defaultSize = { width: 400, height: 260 };
  console.log(store.state);
  const defaultSize = Object.assign(
    {},
    store.state.imageDragMoudules.editorConfig.defaultComponentSize
  );
  const copied =
    (_a = store.state.imageDragMoudules.draggedComponent) !== null &&
    _a !== void 0
      ? _a
      : '';
  const canvasSize = store.state.imageDragMoudules.canvas.size;
  const draggedConfig = store.state.imageDragMoudules.draggedConfig || {};
  let left, top;
  // 拖放结束时鼠标在画布上
  if (target.tagName === 'DIV' && target.className === 'editor-canvas-area') {
    left =
      offsetX -
      ((draggedConfig === null || draggedConfig === void 0
        ? void 0
        : draggedConfig.offsetX) || 0);
    top =
      offsetY -
      ((draggedConfig === null || draggedConfig === void 0
        ? void 0
        : draggedConfig.offsetY) || 0);
  } else {
    const targetDiv = path.find(el => el.className.indexOf('cp cp') !== -1);
    // 拖拽放置的目标位置在组件上
    console.log(targetDiv.style);

    const [x, y] =
      (_b = targetDiv.style.transform.match(
        /translate[X|Y]\((\d+)(?:px)?\)/g
      )) === null || _b === void 0
        ? void 0
        : _b.map(d => {
            var _a;
            return (_a =
              d === null || d === void 0
                ? void 0
                : d.match(/translate[X|Y]\((\d+)(?:px)?\)/)) === null ||
              _a === void 0
              ? void 0
              : _a[1];
          });
    left =
      Number(x) +
      offsetX -
      ((draggedConfig === null || draggedConfig === void 0
        ? void 0
        : draggedConfig.offsetX) || 0);
    top =
      Number(y) +
      offsetY -
      ((draggedConfig === null || draggedConfig === void 0
        ? void 0
        : draggedConfig.offsetY) || 0);
  }
  const gridColWidth =
    canvasSize.width / store.state.imageDragMoudules.canvas.grid.col;
  const gridColHeight =
    canvasSize.height / store.state.imageDragMoudules.canvas.grid.row;
  const surplusX = left % gridColWidth;
  const surplusY = top % gridColHeight;
  if (surplusX > gridColWidth / 2) {
    left = (Math.floor(left / gridColWidth) + 1) * gridColWidth;
  } else {
    left = Math.floor(left / gridColWidth) * gridColWidth;
  }
  if (surplusY > gridColHeight / 2) {
    top = (Math.floor(top / gridColHeight) + 1) * gridColHeight;
  } else {
    top = Math.floor(top / gridColHeight) * gridColHeight;
  }
  left = left + 8;
  top = top + 8;
  const surplusW = defaultSize.width % gridColWidth;
  const surplusH = defaultSize.height % gridColHeight;
  if (surplusW > gridColWidth / 2) {
    defaultSize.width =
      (Math.floor(defaultSize.width / gridColWidth) + 1) * gridColWidth;
  } else {
    defaultSize.width =
      Math.floor(defaultSize.width / gridColWidth) * gridColWidth;
  }
  if (surplusH > gridColHeight / 2) {
    defaultSize.height =
      (Math.floor(defaultSize.height / gridColHeight) + 1) * gridColHeight;
  } else {
    defaultSize.height =
      Math.floor(defaultSize.height / gridColHeight) * gridColHeight;
  }
  defaultSize.height = defaultSize.height - 16;
  defaultSize.width = defaultSize.width - 16;
  // 边界判定
  if (left < 0) left = 0;
  if (top < 0) top = 0;
  if (left + defaultSize.width > canvasSize.width)
    left = canvasSize.width - defaultSize.width;
  if (top + defaultSize.height > canvasSize.height)
    top = canvasSize.height - defaultSize.height;
  const newComponent = {
    component: copied,
    size: Object.assign({}, defaultSize),
    position: { left, top },
  };
  store.commit('createComponent', newComponent);
}
